<template>
    <div class="container">
      <header class="header">
        <mt-header title="食谱">
            <router-link to="../silkbag" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
    
      </header>
      <div class="content">
        <div class="tit">
            
        </div>
        <div class="cons">
          <router-link tag="p" to="/nbnc"><div class="p"><img src="../../assets/xiao0.jpg" alt="" srcset=""></div>能不能吃</router-link>
          <router-link tag="p" to="/foodyysp"><div class="p"><img src="../../assets/xiao1.jpg" alt="" srcset=""></div>营养食谱</router-link>
          <router-link tag="p" to="/wdsc"><div class="p"><img src="../../assets/xiao2.jpg" alt="" srcset=""></div>我的收藏</router-link>
        </div>
      </div>
      <div class="con">
        <div class="left"><img src="../../assets/bb3.jpg" alt="" srcset="" ></div>
        <div class="right">
          <p>生长发育，8个月的孩子生长发育特点</p>
          <span>9999万人在读</span>
        </div>
      </div>
      <div class="con">
        <div class="left"><img src="../../assets/bb3.jpg" alt="" srcset="" ></div>
        <div class="right">
          <p>生长发育，8个月的孩子生长发育特点</p>
          <span>9999万人在读</span>
        </div>
      </div>     
    </div>
</template>

<script>
export default {
    data() {
      return {
        handleClose(){

        }
      }
    },
}
</script>

<style lang="" scoped>
  .mint-button-text{
    margin-left: 120px
  }
  .tit{
    width: 100%;
    height: 30%;
    background: #cccccc;
  }
  .cons{
    border-radius: 50% 50% 0 0;
    width: 100%;
    height: 18%;
    background: white;
    margin-top: -52px;
    overflow: hidden;
  }
  .cons{
    display:flex; 
    
  }
  .cons p{
    margin-top: 56px;
    margin-left: 14%;
    width: 60px;
    height: 60px;
  }
  .cons .p img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px
  }

  .con{
      width: 78%;
      height: 12%;
      background:#F0E7D1;
      margin-bottom: 4%;
      padding: 7% 6%;
      margin: 5% 5%;
    }
    .left{
      float:left;
      width: 40%;
      height: 100%;
      margin-right: 2%
    }
    .left img{
      width: 100%;
      height: 100%;
    }
    .right{
       width: 56%;
       height: 100%;
       margin-left: 2%;
       float: right
    }
    .right p{
      height: 80%;
    }
    .right span{
      color: #BCBBBB;
      font-size: 12px
    }
</style>
